<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"></meta>
<base href="${base}/" />
<title>购物车_${site}</title>
<jsp:include page="base.jsp" />
<script src="manager/js/jquery-3.5.0.js"></script>
<script src="manager/js/template-web.js"></script>
<script src="manager/layer/layer.js"></script>
<script type="text/javascript">
	function finish() {
		$("input[name='checks']").each(function(){
			if($(this).prop("checked")){
				let num = $(this).parent().parent().children().eq(4).children().children().eq(1).val();
				let id = $(this).parent().parent().children().eq(1).children().val();
				let cartid = $(this).parent().parent().children().eq(1).children().eq(1).val();
				let data = num+","+id+","+cartid;
				$(this).val(data);
				
			}
		})
		$("#form1").submit();
	}
	
	$(function(){
		//一进来就查询数据,先判断是否有登录
		let url = "cart?opr=in"
		$.getJSON(url,function(result){
			$("#sum_price").html(0);
			if(result.code==200){
				let carthtml = template("goods",{
					//待弄清购物车里应该有哪些数据
					carts:result.data
				})
				$("#oldtr").replaceWith(carthtml);
				
				//注册计算总额的事件
				$(".cancal").on("click",function(){
					calTotal();
				})
				//数量改变先触发小计改变
				$("input[name='singleMoney']").change(function(){
					let value = $(this).val();
					if(value<1){
						layer.msg("亲，不能再减少了哟");
						$(this).val(1);
						changeMoney($(this));
						return;
					}
					//改变小计
					changeMoney($(this));
				})
				
				//注册删除事件
				$(".delete").on("click",function(e){
					let obj = $(this);
					layer.confirm('阁下确定要删除该条数据吗？',{
						btn:['要它何用？删了','容我三思']
					},function(index){
						//删除
						deleteTr(obj);
						layer.close(index);
					},function(){
						
					})
				})
				
				//注册加减改变数量
				$(".add").on("click",function(e){
					let value = parseInt($(e.target).prev().val());
					$(e.target).prev().val(value+1);
					changeMoney($(e.target).prev());
				})
				$(".reduce").on("click",function(e){
					let value = parseInt($(e.target).next().val());
					if(value<2){
						layer.msg("亲，不能再减少了哟");
						return;
					}
					$(e.target).next().val(value-1);
					changeMoney($(e.target).next());
				})
			}
		})
		
		function changeMoney(obj){
			//改变小计的值
			//先找出该商品的单价
			let value = obj.val();
			let price = parseFloat(obj.attr("price"));
			//在找出小计进行改变
			obj.parent().parent().next().children("#goods_sum_3").html(price*value);
			//调用函数改变总值
			calTotal();
		}
		
		//计算总额
		function calTotal(){
			let total = 0;
			$(".selectTr").each(function(){
				if($(this).prop("checked")){
					let temp  = $(this).parent().parent().children().eq(5).children("#goods_sum_3");
					total += parseFloat(temp.text());
				}
			})
			$("#sum_price").html(total);
		}
		
		//实现删除
		function deleteTr(obj){
			//发送请求删除数据库中的数据
			let cartid = obj.attr("cartid");
			let rdata = "opr=del&cartid="+cartid;
			$.get("cart",rdata,function(data){
				if(data.code==200){
					//若成功就删除该行
					obj.parent().parent().remove();
					//重新计算
					calTotal();
				}else{
					layer.alert("系统维护中，请稍后再试");
				}
			},"json")
		}
		
		//实现全选
		$("#checkAll").click(function(){
			//判断全选按钮的状态
			if($("#checkAll").prop("checked")){
				//如果是点击全选，用each方法将每个子CheckBox置为选中
				$(".selectTr").each(function(){
					$(this).prop("checked",true)
				})
			}else{
				$(".selectTr").each(function(){
					$(this).prop("checked",false)
				})
			}
		})
	})
//<input type="hidden" name="" value="{{id}}"/>
</script>
<script type="text/html" id="goods">
{{each carts cart}}
	<tr>
<td><input type="checkbox" class="selectTr cancal" name="checks"></td>
						<td><input type="hidden" name="goodsid" value="{{cart.goods.id}}"/>
						<input type="hidden" name="cartid" value="{{cart.id}}"/>
						<img src="manager/{{cart.goods.image}}" width="66px"
							height="66px" alt="{{cart.goods.name}}"
							title="{{cart.goods.name}}" /></td>
						<td class="t_l"><a href="" class="blue">{{cart.goods.name}}</a></td>
						<td>￥<b>{{cart.goods.saleprice}}</b></td>
						<td>
							<div class="num">
								<a class="reduce" href="javascript:void(0)" onclick=''>-</a> <input
									name="singleMoney" class="tiny" value="{{cart.nums}}" price="{{cart.goods.saleprice}}" type="text" id="goods_count_3">
								<a class="add" href="javascript:void(0)" onclick=''>+</a>
							</div>
						</td>
						<td>￥<b class="red2" id="goods_sum_3">{{cart.nums*cart.goods.saleprice}}</b></td>
						<td><a href="javascript:void(0)" class="delete" cartid="{{cart.id}}">删除</a></td>
					</tr>
{{/each}}
</script>
</head>
<body class="second">
	<div class="brand_list container_2">
		<jsp:include page="header.jsp"></jsp:include>
		<div class="wrapper clearfix">
			<div class="position mt_10">
				<span>您当前的位置：</span> <a href=""> 首页</a> » 购物车
			</div>
			<div class="myshopping m_10">
				<ul class="order_step">
					<li class="current"><span class="first">1、查看购物车</span></li>
					<li><span>2、填写核对订单信息</span></li>
					<li class="last"><span>3、成功提交订单</span></li>
				</ul>
			</div>
			<form action="order?opr=initialAdd" method="post" id="form1">
				<table width="100%" class="cart_table m_10">
					<col width="115px" />
					<col width="400px" />
					<col width="80px" />
					<col width="80px" />
					<col width="80px" />
					<caption>查看购物车</caption>
					<thead>
						<tr>
							<th><input type="checkbox" id="checkAll" class="cancal">选择</th>
							<th>图片</th>
							<th>商品名称</th>
							<th>单价</th>
							<th>数量</th>
							<th>小计</th>
							<th class="last">操作</th>
						</tr>
					</thead>
					<tbody id="goodsList">
					<tr id="oldtr">
						<td><input type="checkbox"></td>
						<td><input type="hidden" name="" value="{{id}}"/>
						<img src="" width="66px"
							height="66px" alt=""
							title="" /></td>
						<td class="t_l"><a href="" class="blue">商品</a></td>
						<td>￥<b>100</b></td>
						<td>
							<div class="num">
								<a class="reduce" href="javascript:void(0)" onclick=''>-</a> <input
									name="" class="tiny" value="1" onblur='' type="text" id="goods_count_3">
								<a class="add" href="javascript:void(0)" onclick=''>+</a>
							</div>
						</td>
						<td>￥<b class="red2" id="goods_sum_3">100</b></td>
						<td><a href="">删除</a></td>
					</tr>
						<tr class="stats">
							<td colspan="8">金额总计（不含运费）：￥<b class="orange" id='sum_price'></b></td>
						</tr>
					</tbody>
					<tfoot>
						<tr>
							<td colspan="2" class="t_l"></td>
							<td colspan="6" class="t_r"><a class="btn_continue" href="index">继续购物</a>
								<a class="btn_pay" href="javascript:finish();">去结算</a></td>
						</tr>
					</tfoot>
				</table>
			</form>
		<jsp:include page="footer.jsp" />
		</div>
	</div>
</body>

</html>
